<template>
  <div class="effective-config-view">
    <el-skeleton v-if="loading" :rows="8" animated />

    <div v-else-if="effectiveConfig" class="config-content">
      <!-- 配置来源说明 -->
      <div class="config-source">
        <el-alert
          :type="effectiveConfig.hasAccountConfig ? 'success' : 'info'"
          :title="getSourceTitle()"
          :description="getSourceDescription()"
          :closable="false"
          show-icon />
      </div>

      <!-- 有效配置展示 -->
      <div class="config-display">
        <h6>最终有效配置</h6>
        <div class="config-json">
          <pre>{{ formatJson(effectiveConfig.effectiveConfig) }}</pre>
        </div>
      </div>

      <!-- 配置对比（如果有账号配置） -->
      <div v-if="effectiveConfig.hasAccountConfig && effectiveConfig.globalFallback" class="config-comparison">
        <h6>配置继承关系</h6>

        <el-row :gutter="12">
          <el-col :span="12">
            <div class="config-block account-config">
              <div class="block-header">
                <el-tag type="success" size="small">账号配置</el-tag>
              </div>
              <pre class="config-json">{{ formatAccountConfig() }}</pre>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="config-block global-config">
              <div class="block-header">
                <el-tag type="info" size="small">全局配置</el-tag>
              </div>
              <pre class="config-json">{{ formatJson(effectiveConfig.globalFallback) }}</pre>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div v-else class="no-config">
      <el-empty description="暂无有效配置" :image-size="60" />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  effectiveConfig: {
    type: Object,
    default: null
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 获取配置来源标题
const getSourceTitle = () => {
  if (!props.effectiveConfig) return '无配置'

  if (props.effectiveConfig.hasAccountConfig) {
    return '使用账号专属配置'
  } else {
    return '继承全局配置'
  }
}

// 获取配置来源描述
const getSourceDescription = () => {
  if (!props.effectiveConfig) return ''

  if (props.effectiveConfig.hasAccountConfig) {
    return '当前使用该账号的专属配置，部分字段可能继承自全局配置'
  } else {
    return '该账号未设置专属配置，完全继承全局配置'
  }
}

// 格式化JSON
const formatJson = (obj) => {
  if (!obj) return '{}'
  try {
    return JSON.stringify(obj, null, 2)
  } catch (error) {
    return '{}'
  }
}

// 格式化账号配置（仅显示账号专有的字段）
const formatAccountConfig = () => {
  if (!props.effectiveConfig?.activeAccountConfig) return '{}'

  const accountConfig = props.effectiveConfig.activeAccountConfig
  const displayConfig = {
    configName: accountConfig.configName,
    projectName: accountConfig.projectName,
    baseAsset: accountConfig.baseAsset,
    quoteAsset: accountConfig.quoteAsset,
    buyAmount: accountConfig.buyAmount,
    targetBuyQuote: accountConfig.targetBuyQuote,
    proxyEnabled: accountConfig.proxyEnabled
  }

  // 添加自定义配置
  if (accountConfig.customConfig) {
    try {
      const customConfig = JSON.parse(accountConfig.customConfig)
      Object.assign(displayConfig, customConfig)
    } catch (error) {
      console.warn('解析自定义配置失败:', error)
    }
  }

  return JSON.stringify(displayConfig, null, 2)
}
</script>

<style lang="scss" scoped>
.effective-config-view {
  .config-source {
    margin-bottom: 16px;
  }

  .config-display {
    margin-bottom: 20px;

    h6 {
      margin: 0 0 8px;
      font-size: 14px;
      font-weight: 600;
      color: #303133;
    }

    .config-json {
      background-color: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 4px;
      padding: 12px;
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      font-size: 12px;
      line-height: 1.4;
      color: #495057;
      max-height: 200px;
      overflow-y: auto;
    }
  }

  .config-comparison {
    h6 {
      margin: 0 0 12px;
      font-size: 14px;
      font-weight: 600;
      color: #303133;
    }

    .config-block {
      border: 1px solid #e9ecef;
      border-radius: 4px;
      overflow: hidden;

      .block-header {
        padding: 8px 12px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
      }

      .config-json {
        padding: 12px;
        margin: 0;
        background-color: #fff;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 11px;
        line-height: 1.4;
        color: #495057;
        max-height: 150px;
        overflow-y: auto;
      }

      &.account-config {
        .block-header {
          background-color: #f0f9ff;
        }
      }

      &.global-config {
        .block-header {
          background-color: #f9f9f9;
        }
      }
    }
  }

  .no-config {
    text-align: center;
    padding: 40px 20px;
  }
}
</style>